<template>
    <div class="neirong">
        <el-container style="height: 100vh; display: flex; flex-direction: column;">
            <el-header class="tou" style='background-color: black;'>
                <div class="ding">
                    <div style="display: flex;">
                        <img src="" alt="Logo" style="align-self: center;">
                        <p>课程管理系统</p>
                    </div>
                    <div class="kaoyou">
                        <img src="" alt="不知道什么">
                        <img src="" alt="猫">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                
                                <button @click="tuichu"> 退出</button>
                                <el-dropdown-item>狮子头</el-dropdown-item>
                                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </el-header>
            <el-container style="flex: 1; display: flex;">
                <el-aside  class="kaoyou" style="background-color:#4f575e ;" >
                    <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64"
                        text-color="#fff" active-text-color="#ffd04b" router>
                        <el-menu-item :index="item.path" v-for="item in luyou" :key="item.path" style="width: 300px; justify-items: center;align-items: center;">
                            <i :class="item.meta?.icon"></i>
                            <span slot="title" >{{ item.meta?item.meta.name:item.path}}</span>
                        </el-menu-item>
                     
                    </el-menu>
                </el-aside>


                <el-main style="flex: 1 ; padding: 0;"><router-view></router-view></el-main>
            </el-container>
            <el-footer class="jiao" style="background-color: black;">Footer</el-footer>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            luyou: []
        };
    }, 
    methods: {
    tuichu() {
      // 还原vuex的内容
      console.log(1);
      
      this.$store.commit("wgnd/gabianuserInfo", {})
      this.$router.push("/zhuye")
    }
  },
    mounted() {
        console.log(this.$router);
        console.log(this.$route);


















        
        
        console.log(this.$router.options.routes);
        
        
        this.luyou = this.$router.options.routes[3].children
        console.log(this.$router.options.routes[3].children);
        this.luyou = this.luyou.filter(item => {

return this.$store.state.wgnd.userInfo.permissions.indexOf(item.meta.id) != -1 || !item.meta.id;

});
        
    }
}
</script>

<style lang="scss">
html,
body,
.neirong {
    height: 100%;
    margin: 0;
    padding: 0;
}

.dianhe {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    /* 垂直居中 */
    /* 水平居中，如果需要的话 */
    color: white;
    /* 由于背景是黑色，所以文字设置为白色 */


    /* 添加一些内边距以避免内容紧贴边缘 */

    padding: 0 25px;
    /* 示例内边距 */
}

.tu {
    width: 30px;
    height: 30px;
}

.ding {
    display: flex;
    align-items: center;
    /* 垂直居中 */

    /* 水平居中，如果需要的话 */
    color: white;
    /* 由于背景是黑色，所以文字设置为白色 */
    background-color: black;
    /* 添加一些内边距以避免内容紧贴边缘 */
    width: 100%;
    justify-content: space-between;
}

.tou {
    /* 这里的 height 可以省略，因为父容器已经设置了高度，并且 flex-direction 为 column */
    display: flex;
    flex-shrink: 0;
    /* 防止头部被压缩 */
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.kaoyou {
    display: flex;
    justify-content: flex-end;
    /* 将子元素靠右对齐 */
    align-items: center;
}
.el-menu-item{
    padding: 0;
}

/* 如果需要，可以为 el-aside, el-main, 和 el-footer 添加额外的样式 */
</style>